<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>欢迎页面-X-admin2.0</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
	<meta http-equiv="Pragma" content="no-cache">
	<meta http-equiv="Window-target" content="_top">
	<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
	<!--[if lt IE 9]>
	<script src="https://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
	<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.js"></script>
	<![endif]-->

	<!-- common -->
	<!-- <link href="assets/common/css/reset.css" rel="stylesheet" /> -->

	<!-- jquery -->
	<script src="assets/jquery/jquery-1.9.1.min.js"></script>
	<!--解决ie8 ie9 跨域-->
	<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-ajaxtransport-xdomainrequest/1.0.3/jquery.xdomainrequest.min.js" type="text/javascript" charset="utf-8"></script>

	<!-- bootrstrap + table + validator -->
	<link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
	<link href="assets/bootstrap-table/css/bootstrap-table.min.css" rel="stylesheet" />
	<link href="assets/bootstrap-validator/css/bootstrapValidator.css" rel="stylesheet" />
	<script src="assets/bootstrap/js/bootstrap.min.js"></script>
	<script src="assets/bootstrap-table/js/bootstrap-table.min.js"></script>
	<script src="assets/bootstrap-table/js/bootstrap-table-zh-CN.min.js"></script>
	<script src="assets/bootstrap-validator/js/bootstrapValidator.min.js"></script>

	<!-- My97DatePicker -->
	<script src="assets/My97DatePicker/WdatePicker.js"></script>

	<!-- ztree -->
	<link href="assets/ztree/css/metroStyle/metroStyle.css"  rel="stylesheet" />
	<script src="assets/ztree/js/jquery.ztree.core.min.js" type="text/javascript" ></script>
	<script src="assets/ztree/js/jquery.ztree.excheck.min.js" type="text/javascript" ></script>

	<!-- layer -->
	<script src="xadmin/lib/layui/layui.all.js"></script>
	<!-- layui -->
	<link rel="stylesheet" href="xadmin/lib/layui/css/layui.css">

	<!-- 页面 样式自定义 -->
	<link href="assets/common/css/pageControl.css" rel="stylesheet" />

	<!-- ajax提交表格（兼容ie8） -->
	<script src="assets/jqueryform/jquery-form.js"></script>

	<style type="text/css">


	</style>
</head>

<body class="layui-anim layui-anim-upbit">
<div class="page-detail">
	<div class="row">
		<div class="col-xs-12">
			<form class="form-horizontal">
				<div class="form-group col-xs-3 form-group-line">
					<label for="name" class="col-xs-4 float-right">名称</label>
					<div class="col-xs-8">
						<input type="text" class="form-control input-sm" id="pname" placeholder="名称" />
					</div>
				</div>

				<div class="form-group col-xs-3 form-group-line">
					<label for="distance" class="col-xs-4 float-right">距离</label>
					<div class="col-xs-8">
						<select class="form-control input-sm" id="distance">
							<option>1</option>
							<option>2</option>
							<option>3</option>
							<option>4</option>
							<option>5</option>
						</select>
					</div>
				</div>

				<div class="form-group col-xs-3 form-group-line">
					<label class="col-xs-4 float-right">部门</label>
					<div class="input-group col-xs-8">
						<input id="dept" type="text" class="form-control readonly-bck input-sm" value="" placeholder="请选择部门" onclick="showDept();" readonly="readonly" required />
						<div class="input-group-btn">
							<button type="button" class="btn btn-default btn-sm" onclick="clearDept();"><span class="glyphicon glyphicon-remove"></span></button>
						</div>
					</div>
					<input type="hidden" id="depthid" name="depthid" /><!-- 隐藏值 -->
				</div>

				<div class="form-group col-xs-3 form-group-line">
					<label class="col-xs-4 float-right">时间</label>
					<div class="col-xs-8">
						<input id="time" type="text" class="form-control readonly-bck input-sm" placeholder="时间"  readonly="readonly" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:true});" />
					</div>
				</div>

				<div class="checkbox col-xs-3 " >
					<label>
						<input type="checkbox"> Check me out
					</label>
				</div>
				<button type="button" class="btn btn-sm btn-primary">查询</button>

				<button type="button" class="btn btn-sm btn-primary" onclick="refresh()">刷新</button>

				<button type="button" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#myModal">打开模态框</button>
			</form>
		</div>
	</div>

	<div class="row">
		<div class="col-xs-12">
			<table id="table_data"></table>
		</div>
	</div>

	<div id="menuContent" class="menuContent">
		<ul id="treeDemo" class="ztree"></ul>
	</div>

</div>


<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content" style="width: 400px;">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				<h4 class="modal-title" id="myModalLabel">
					新增部门
				</h4>
			</div>
			<div class="modal-body">
				<form role="form" id="form-add" class="form-horizontal">

					<div class="form-group">
						<label class="col-xs-3 no-padding-right" >人id</label>
						<div class="col-xs-6">
							<input type="text" class="form-control input-sm" id="id" name="id" placeholder="请输入人id">
						</div>
					</div>

					<div class="form-group">
						<label class="col-xs-3 no-padding-right" >人名</label>
						<div class="col-xs-6">
							<input type="text" class="form-control input-sm" id="name" name="name" placeholder="请输入人名">
						</div>
					</div>

					<div class="form-group">
						<label class="col-xs-3 no-padding-right" >年龄</label>
						<div class="col-xs-6">
							<input type="text" class="form-control input-sm" id="age" name="age" placeholder="请输入年龄">
						</div>
					</div>

					<div class="form-group">
						<label class="col-xs-3 no-padding-right" >部门</label>
						<div class="col-xs-6">
							<input type="text" class="form-control input-sm" id="deptid" name="deptid" placeholder="请输入部门">
						</div>
					</div>

				</form>


			</div>
			<div class="modal-footer">
				<button onclick="subForm();" type="button" class="btn btn-primary btn-sm">提交更改</button>
				<button type="button" class="btn btn-default btn-sm" data-dismiss="modal">关闭</button>
			</div>

		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>

<script type="text/javascript">

	var ztreeData =[
		{id:1, pId:0, name:"北京",deptid:"37001124235"},
		{id:2, pId:0, name:"天津",deptid:"37001124235"},
		{id:3, pId:0, name:"上海",deptid:"37001124235"},
		{id:6, pId:0, name:"重庆",deptid:"37001124235"},
		{id:4, pId:0, name:"河北省",deptid:"37001124235", open:true},
		{id:41, pId:4, name:"石家庄",deptid:"37001124235"},
		{id:42, pId:4, name:"保定",deptid:"37001124235"},
		{id:43, pId:4, name:"邯郸",deptid:"37001124235"},
		{id:44, pId:4, name:"承德",deptid:"37001124235"},
		{id:5, pId:0, name:"广东省",deptid:"37001124235", open:true},
		{id:51, pId:5, name:"广州",deptid:"37001124235"},
		{id:52, pId:5, name:"深圳",deptid:"37001124235"},
		{id:53, pId:5, name:"东莞",deptid:"37001124235"},
		{id:54, pId:5, name:"佛山",deptid:"37001124235"},
		{id:6, pId:0, name:"福建省",deptid:"37001124235", open:true},
		{id:61, pId:6, name:"福州",deptid:"37001124235"},
		{id:62, pId:6, name:"厦门",deptid:"37001124235"},
		{id:63, pId:6, name:"泉州",deptid:"37001124235"},
		{id:64, pId:6, name:"三明",deptid:"37001124235"}
	];

	$(function () {
		//初始化Table
		initTable();
		//getPersonData();
		initValidator();
		//ztree树
		$.fn.zTree.init($("#treeDemo"), setting, ztreeData);

		// $('#myModal').modal('show')
	});

	//初始化表格
	function initTable(){
		//$("#table_data").bootstrapTable("destroy");
		$("#table_data").bootstrapTable({
			url: "http://localhost:8090/person/getPersonDataCom",
			method: "get",  // 使用get请求到服务器获取数据
			striped: true,
			pagination: true,
			pageSize: 5,
			pageNumber:1,
			pageList: [1,2,3,4,5],
			search: false,  // 是否启用查询
			showRefresh: false,//刷新按钮
			clickToSelect: true,
			sidePagination: "server", // 表示服务端分页
			paginationLoop: false,	//分页按钮循环
			queryParamsType : "undefined",
			dataType:"json",
			queryParams: function queryParams(params) {   // 设置查询参数
				params.newDate=Math.random();
				return params;
			},
			onLoadSuccess: function(data){// 加载成功时执行
				//console.log(data);
			},
			onLoadError: function(){  // 加载失败时执行
				layer.alert("加载数据失败");
			},
			onClickRow: function(row,index){  // 行点击事件
				alert("行点击")
			},
			columns: [
				{field: 'pid',align: 'center',width: '10%',title: '人物id'},
				{field: 'pname',align: 'left',width: '20%',title: '人名'},
				{field: 'age',align: 'center',width: '20%',title: '年龄'},
				{field: 'deptid',align: 'left',width: '10%',title: '部门id'},
				{field: 'dname',align: 'center',width: '20%',title: '部门名称'},
				{field: 'loc',align: 'center',width: '20%',title: '部门地址'}
			]
		});
		//单击事件
		$('#table_data').on('click-row.bs.table', function (e, row, element)   {
			alert(row.pid);
		});
	}

	function getPersonData(){
		$.ajax({
			url:"http://localhost:8090/person/getPersonDataCom",
			type:"post",
			data:{"pageNumber":1,"pageSize":3},
			dataType:"json",
			success:function(data){
				console.log(data);
			},
			error:function(data){
				console.log(data);
			}
		});
	}

	//刷新表格
	function refresh(){
		var opt = {
			url: "http://localhost:8090/person/getPersonDataCom",
			silent: true
		};
		$('#table_data').bootstrapTable('refresh', opt);
		layer.msg("刷新成功",{icon:1});
	}

	//表单验证
	function initValidator(){
		$('#form-add').bootstrapValidator({
			message: 'This value is not valid',
			feedbacklcons: {
				valid: 'glyphicon glyphicon-ok',
				invalid: 'glyphicon glyphicon-remove',
				validating: 'glyphicon glyphicon-refresh'
			},
			fields: {
				name: {
					message: '用户名验证失败',
					validators: {
						notEmpty: {	//检测非空,radio也可用
							message: '用户名不能为空'
						},
						stringLength: {//检测长度
							min: 1,
							max: 16,
							message: '长度必须在1-16之间'
						},
						regexp: {//正则验证
							regexp: /^[\u4e00-\u9fa5]+$/,
							message: '人名只能为汉字'
						}
					}
				},
				age : {
					validators: {
						notEmpty: {
							message: '请输入年龄'
						},
						regexp: {
							regexp: /^[0-9]*$/,
							message: '请输入数字'
						}
					}
				},
				deptid : {
					validators: {
						notEmpty: {
							message: '请输入部门编号'
						},
						regexp: {
							regexp: /^[0-9]*$/,
							message: '请输入数字'
						}
					}
				}
				/*
                    notEmpty: {//检测非空,radio也可用
                        message: '文本框必须输入'
                    },
                    stringLength: {//检测长度
                        min: 6,
                        max: 30,
                        message: '长度必须在6-30之间'
                    },
                    regexp: {//正则验证
                        regexp: /^[a-zA-Z0-9_\.]+$/,
                        message: '所输入的字符不符要求'
                    },
                    remote: {//将内容发送至指定页面验证，返回验证结果，比如查询用户名是否存在
                        url: '指定页面',
                        message: 'The username is not available'
                    },
                    different: {//与指定文本框比较内容相同
                        field: '指定文本框name',
                        message: '不能与指定文本框内容相同'
                    },
                    emailAddress: {//验证email地址
                        message: '不是正确的email地址'
                    },
                    identical: {//与指定控件内容比较是否相同，比如两次密码不一致
                        field: 'confirmPassword',//指定控件name
                        message: '输入的内容不一致'
                    },
                    date: {//验证指定的日期格式
                        format: 'YYYY/MM/DD',
                        message: '日期格式不正确'
                    },
                    choice: {//check控件选择的数量
                        min: 2,
                        max: 4,
                        message: '必须选择2-4个选项'
                    }
                }*/
			}
		});
	}

	//modal 表格提交
	function subForm(){
		$("#form-add").bootstrapValidator('validate');//提交验证
		if ($("#form-add").data('bootstrapValidator').isValid()) {//获取验证结果，如果成功，执行下面代码
			//验证成功后的操作，如ajax

			$("#form-add").ajaxSubmit({
				url: "http://localhost:8090/person/addPerson", /*设置post提交到的页面*/
				type: "post", /*设置表单以post方法提交*/
				dataType: "json", /*设置返回值类型为文本*/
				success: function (data) {
					console.log(data);
				},
				error: function (error) { alert(error); }
			});
		}
	}

	//ztree
	var setting = {
		check: {
			enable: false,//是否显示radio/checkbox
			chkboxType: {"Y":"", "N":""}//表示父子节点的联动效果
		},
		view: {
			dblClickExpand: false,
			selectMulti:false//表示禁止多选
		},
		data: {
			simpleData: {
				enable: true//简单数据模式
			}
		},
		callback: {
			onClick: onClick			//节点被点击的事件回调函数
		}
	};
	function onClick(e, treeId, treeNode) {
		var zTree = $.fn.zTree.getZTreeObj("treeDemo");
		nodes = zTree.getCheckedNodes(true);

		var v = "";	//框中展示的内容
		var id="";	//隐藏狂中的内容
		v=treeNode.name;
		id=treeNode.deptid;

		$("#dept").val(v);
		$("#depthid").val(id);
	}

	function showDept() {
		var cityObj = $("#dept");
		var cityOffset = $("#dept").offset();
		$("#menuContent").css({width:cityObj.css("width") , left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");

		$("body").bind("mousedown", onBodyDown);
	}
	function hideMenu() {
		$("#menuContent").fadeOut("fast");
		$("body").unbind("mousedown", onBodyDown);
	}
	function onBodyDown(event) {
		if (!(event.target.id == "menuBtn" || event.target.id == "dept" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
			hideMenu();
		}
	}
	function clearDept(){
		$("#dept").val("");
		$("#depthid").val("");
		hideMenu();
	}


	/**
	 *
	 * 判断是否为jsonstring
	 */
	function isJsonFormat( str ) {
		if(str!=null){
			try {
				$.parseJSON(str);
			} catch (e) {
				return false;
			}
			return true;
		}else
		{
			return false;
		}

	}
	/**
	 * 判断是否为json
	 */
	function isJsonType(json)
	{
		if(typeof(json) =='object'&&json!=null)
			return true;
		else
			return false;
	}
</script>
</body>

</html>